<script setup>
import UploadFile from "@/views/common/uploadFile.vue";
import {pageofficeOpenFile} from "@/plugins/pageoffice/pageoffice-common.js";
import useAppStore from "@/store/modules/app.js";

const device = computed(() => useAppStore().device);
const {proxy} = getCurrentInstance()
const listLoading = ref(false)
const loading = ref(false)
const attachmentList = ref(null)
const total = ref(0)
const emits = defineEmits(['getAttachmentList'])
const props = defineProps({
  attachmentButtons: {
    type: Object
  },
  attachmentOpInfo: {
    type: Object
  },
  isRefreshAttachment: {
    type: Boolean
  }
})
const listQueryParams = props.attachmentOpInfo.listQueryParams
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})

//上传文件所需参数
const uploadFileRef = ref(null)
const uploadParams = ref({
  url: import.meta.env.VITE_APP_BASE_API + props.attachmentOpInfo.addUrl,
  title: "上传附件",
  accept: '.png, .jpg, .jpeg, .doc, .docx, .pdf, .xls, .xlsx ',
  name: 'file',
  data: listQueryParams
})

watchEffect(() => {
  if (props.isRefreshAttachment) {
    getAttachmentList()
  }
})

function getAttachmentList() {
  listLoading.value = true
  queryParams.value = {...queryParams.value, ...listQueryParams}
  props.attachmentOpInfo.getListApi(queryParams.value).then((res) => {
    attachmentList.value = res.list
    total.value = res.total
    listLoading.value = false
  })
}

function handleUpload() {
  uploadFileRef.value.openUploadDialog()
}

function uploadFileSuccess() {
  getAttachmentList()
}

function openFile(row) {
  const attachmentId = row.id
  props.attachmentOpInfo.getFileApi(attachmentId).then(response => {
    const fileInfo = JSON.stringify(response)
    pageofficeOpenFile(props.attachmentOpInfo.openUrl + attachmentId, fileInfo)
  })
}

function handleDelete(row) {
  proxy.$modal.confirmAndExecuteJS('确认要删除当前附件？', confirmDelete, row.id, getAttachmentList)
}

function confirmDelete(attachmentId) {
  props.attachmentOpInfo.deleteApi(attachmentId).then(() => {
    proxy.$modal.msgSuccess('删除成功')
    getAttachmentList()
  })
}

function backList() {
  const obj = { path: props.attachmentOpInfo.backListUrl, query: { t: Date.now() } }
  proxy.$tab.closeOpenPage(obj)
}

</script>

<template>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button @click="backList">返 回</el-button>
    </el-col>
    <el-col :span="1.5">
      <slot name="uploadAttachment"/>
      <el-button
          type="primary"
          plain
          icon="Upload"
          @click="handleUpload"
          v-if="attachmentButtons?.isAddAttachment"
      >上传</el-button>
      <UploadFile ref="uploadFileRef" :uploadParams="uploadParams" @uploadFileSuccess="uploadFileSuccess"/>
    </el-col>
  </el-row>

  <!-- 表格数据 -->
  <el-table v-loading="loading" :data="attachmentList">
    <el-table-column label="文件名" prop="name" :show-overflow-tooltip="true" min-width="200"/>
    <el-table-column label="上传时间" align="left" prop="createTime" width="200"/>
    <el-table-column label="操作" :fixed="device === 'desktop' ? 'right' : null" width="200" class-name="small-padding fixed-width">
      <template #default="scope">
        <el-button link type="primary" icon="Edit" @click="openFile(scope.row)">打开</el-button>
        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                   v-if="attachmentButtons?.isDeleteAttachment">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getAttachmentList"
  />
</template>